<!--
 * @Description: 资源管理---运维资源---数据目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <el-row class="form-row">
        <el-col :span="6"  :title="itemObj.label">
            <div class="form-label"><span class="required" v-show="itemObj.required">*</span>{{itemObj.label}}:</div>
        </el-col>
        <el-col style="width:14px">
           &nbsp;
        </el-col>
        <el-col :span="16">
           <el-row>
               <div  v-for="subItemObj in itemObj.subItems">
                   <el-col :span="12" v-if="subItemObj.editorType==='input'">
                       <el-col  :span="8" class="form-label" :title="subItemObj.label">
                           <span class="required" v-show="subItemObj.required" >*</span>{{subItemObj.label}}</el-col>
                       <el-col  v-if="subItemObj.editorType==='input'" :span="14" class="content-cell">
                           <el-input
                                   :disabled="disabledState"
                                   :class="inputExtClass"
                                   size="small"
                                   :placeholder="subItemObj.placeholder"
                                   :suffix-icon="icon"
                                   v-model="subItemObj.value">
                           </el-input>
                       </el-col>
                   </el-col>

                   <el-col :span="12" v-if="subItemObj.editorType==='selectDrop'" >
                       <el-col :span="8"  class="form-label" :title="subItemObj.label">
                           <span class="required" v-show="subItemObj.required">*</span>{{subItemObj.label}}</el-col>
                       <el-col :span="14" v-if="subItemObj.editorType==='selectDrop'"  class="content-cell">
                           <el-select v-model="subItemObj.value" :multiple="subItemObj.multiple"  :class="inputExtClass" size="small" placeholder="请选择" style="width: 100%;">
                               <el-option
                                       v-for="(sonItem,index) in subItemObj.options"
                                       :key="index"
                                       :label="sonItem.label"
                                       :value="sonItem.value">
                               </el-option>
                           </el-select>
                       </el-col>
                   </el-col>

               </div>
           </el-row>
        </el-col>

    </el-row>
</template>

<script>

    export default {
        name: "el-input-ctl",
        components: {},
        props: {
            disabledField: {
                type: Array, default: () => {
                    return []
                }
            },
            itemObj: {
                type: Object, default: () => {
                    return {}
                }
            }
        },
        computed: {
            spanCol(){
                if(this.itemObj.subItems!=null){
                    let spanCol={1:24,2:8};
                    return spanCol[this.itemObj.subItems.length];
                }else{
                    return  24;
                }

            },
            disabledState(){
                return this.disabledField.includes(this.itemObj.id);
            },
            itemValue(){
                return this.itemObj.value;
            },
            //输入框的扩展样式
            inputExtClass() {
                if (this.hasRepError) {
                    return 'hasRepError';
                }
                return '';
            },
            icon() {
                if (this.hasRepError) {
                    return 'el-icon-warning';
                }
                return this.itemObj.icon || '';
            },
        },
        data() {
            return {
                subItemVal:'',
                hasRepError: false,
                errorMes: '',
                itemVal: this.itemObj.value,
            }
        },
        created() {

        },
        mounted() {
        },
        watch: {
            itemValue(newVal){
                this.itemVal=newVal;
            },
            itemVal(newVal) {
                this.$emit('input', newVal);
                if (newVal != null && newVal !== "") {
                    this.hasRepError = false;
                    this.validate();
                }
            }
        },
        methods: {
            //添加错误提示信息
            addMsgTitle(){
                this.$nextTick(()=>{
                    let els=this.$el.querySelectorAll(".el-icon-warning");
                    els.forEach((itemObj)=>{
                        itemObj.setAttribute("title",this.errorMes);
                    })
                })
            },
            validate() {
                if (this.itemObj.required && (this.itemObj.value == null || this.itemObj.value == "")) {
                    this.hasRepError = true;
                    this.errorMes = this.itemObj.label+"不能为空，请输入相应的值";
                    this.addMsgTitle();
                    return false;
                }
            },
            getErrorFlag(){
                if(this.itemObj.show){
                    return this.hasRepError;
                }
                return false;
            }
        }
    };
</script>
<style lang="scss">
     .left-cell{
         float: left;
     }
    .left-cell.form-label{
        margin-right: 8px;
    }
    .left-cell.content-cell{
        margin-right: 10px;
    }
</style>